import React from 'react';
import { Link, Tooltip, Typography } from '@arco-design/web-react';
import dayjs from 'dayjs';
import store from '@/store';
import clipboard from '@/utils/clipboard';
import Status from '@/components/Status';

export function getColumns(
  t: unknown,
  callback: (record: Record<string, unknown>, type: string) => Promise<void>,
  tableColumns: Array<unknown>,
  options: Array<any>,
  lang: string
) {
  const defaultColumns = options.filter((a) => tableColumns.includes(a.value));
  const onCell = (a: Record<string, unknown>) => {
    callback(a, 'details');
  };

  const customColumns = [
    {
      title: t['searchTable.columns.number'],
      dataIndex: 'refNumber',
      width: 290,
      render: (a, b) => {
        return (
          <Link hoverable={false}>
            <Status status={b.status?.key}></Status>
            <Typography.Text
              underline
              onClick={() => {
                onCell({ refNumber: a });
              }}
            >
              {a}
            </Typography.Text>
            <Typography.Text
              underline
              copyable
              onClick={() => {
                clipboard(a);
                store.dispatch({
                  type: 'update-referenceDetails',
                  payload: {
                    referenceDetails: { refNumber: a, fullName: b.fullName },
                  },
                });
              }}
            ></Typography.Text>
          </Link>
        );
      },
      sorter: true,
    },
    {
      title: t['searchTable.columns.created'],
      dataIndex: 'createdAt',
      width: 200,
      render: (x: string | number | Date | dayjs.Dayjs) => (
        <div className="ltr-ipt">{x ? x : '--'}</div>
      ),
      // sorter: (a: { createdAt: any }, b: { createdAt: any }) => {
      //   return dayjs(b.createdAt).valueOf() - dayjs(a.createdAt).valueOf();
      // },
    },
    {
      title: t['searchTable.columns.name'],
      dataIndex: 'emirateEntity',
      width: 170,
      render: (
        a: { [x: string]: any },
        b: { emirateEntityOther: any }
      ): JSX.Element => {
        return <>{a ? a && a['name'] : b.emirateEntityOther || '--'}</>;
      },
      sorter: true,
    },
    {
      title: t['searchTable.columns.nameAr'],
      dataIndex: 'emirateEntityAr',
      width: 170,
      render: (_, b): JSX.Element => {
        return <>{(b.emirateEntity && b.emirateEntity['nameAr']) || '--'}</>;
      },
      sorter: true,
    },
    {
      title: t['searchTable.columns.type'],
      dataIndex: 'violationType',
      width: 200,
      ellipsis: true,
      render: (a: any): JSX.Element => {
        return (
          <Tooltip content={a?.value[lang === 'en-US' ? 'en' : 'ar']}>
            <div className="ellipsis">
              {a?.value[lang === 'en-US' ? 'en' : 'ar'] || '--'}
            </div>
          </Tooltip>
        );
      },
    },
    {
      title: t['searchTable.columns.desc'],
      dataIndex: 'violationDesc',
      width: 200,
      ellipsis: true,
      render: (a: any): JSX.Element => {
        return (
          <Tooltip
            content={
              <div style={{ maxHeight: '50vh', overflow: 'auto' }}>{a}</div>
            }
          >
            <div className="ellipsis">{a || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: t['searchTable.columns.AdditionalDetails'],
      dataIndex: 'violationAdditionalDetails',
      width: 200,
      render: (a: any): JSX.Element => {
        return (
          <Tooltip
            content={
              <div style={{ maxHeight: '50vh', overflow: 'auto' }}>{a}</div>
            }
          >
            <div className="ellipsis">{a || '--'}</div>
          </Tooltip>
        );
      },
    },
  ];

  const columns = defaultColumns.map((a) => {
    const k = customColumns.findIndex((b) => b.dataIndex === a.value);
    return k === -1
      ? {
          ...{
            title: a.label,
            dataIndex: a.value,
          },
          ...(a.width ? { width: a.width } : {}),
        }
      : customColumns[k];
  });

  return columns;
}
